import React, { useEffect, useState } from "react";
import * as echarts from "echarts";
import "echarts-wordcloud";

const WordCloud: React.FC<any> = ({ WordCloudData }) => {
  let [WordCloud_chart] = useState<echarts.ECharts>();

  //   useEffect(()=>{
  //     console.log(WordCloudData);

  //       },[WordCloudData])

  const randomRGB = () => {
    const r = Math.floor(Math.random() * 255);
    const g = Math.floor(Math.random() * 255);
    const b = Math.floor(Math.random() * 255);
    return `rgb(${r},${g},${b})`;
  };

  useEffect(() => {
    WordCloud_chart = echarts.init(
      document.getElementById("WordCloud_chart") as HTMLElement
    );

    // 构建option配置对象
    const options = {
      series: [
        {
          type: "wordCloud",
          sizeRange: [8, 40],
          rotationRange: [0, 0],
          gridSize: 0,
          layoutAnimation: true,
          textStyle: {
            color: randomRGB,
          },
          emphasis: {
            textStyle: {
              fonstWeight: "bold",
              color: "#000",
            },
          },
          data: WordCloudData.datas,
        },
      ],
    };

    WordCloud_chart.setOption(options);
  }, [WordCloudData]);

  return (
    <div className="w-full h-full">
      <div>【关键词条】</div>
      <div id="WordCloud_chart" className="w-full h-full"></div>
    </div>
  );
};
export default WordCloud;
